import { PageContainer } from '@ant-design/pro-components';
import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  Modal,
  Row,
  Select,
  Table,
  Tag,
  Typography,
} from 'antd';
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash';
import React, { useState } from 'react';

const dataSource = [
  {
    index: 0,
    time: '07:00:00',
    name: '每日早晨点名',
    danwei: '一所',
    jianshi: '全部',
    renyuan: '全部',
    status: '开启',
  },
  {
    index: 1,
    time: '08:00:00',
    name: '特殊监所点名计划',
    danwei: '一所',
    jianshi: 'A区201,A区202,A区203',
    status: '开启',
    renyuan: '全部',
  },
  {
    index: 2,
    name: '重大人员点名计划',
    time: '07:00:00',
    status: '开启',
    danwei: '二所',
    jianshi: '全部',
    renyuan: '一级重大安全风险人员',
  },
];
const Admin: React.FC = () => {
  const [data, setData] = useState(dataSource);
  const [open, setOpen] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const [editRow, setEditRow] = useState(null);
  const [form] = Form.useForm();

  const editDataAdapter = (values) => {
    const nValues: any = {};
    Object.keys(values).forEach((key) => {
      if (key?.indexOf('time') !== -1) {
        nValues[key] = dayjs(values[key], 'YYYY-MM-DD hh:mm:ss');
      } else {
        nValues[key] = values[key];
      }
    });
    return nValues;
  };

  const onOkAdapter = (values) => {
    const nValues: any = {};
    Object.keys(values).forEach((key) => {
      if (key?.indexOf('time') !== -1) {
        nValues[key] = values[key]?.format('YYYY-MM-DD hh:mm:ss');
      } else {
        nValues[key] = values[key];
      }
    });
    return nValues;
  };

  const handleEdit = (record: any) => {
    setIsEdit(true);
    const nValues = editDataAdapter(record);
    setOpen(true);
    console.log('😈nValues', nValues);
    form.setFieldsValue(nValues);

    setEditRow(record);
  };

  const handleOk = () => {
    if (isEdit) {
      form.validateFields().then((values) => {
        console.log('😈values', values);
        const nValues = onOkAdapter(values);
        const nData = cloneDeep(data);
        nData[editRow.index] = { index: editRow.index, ...nValues };
        console.log('😈nValues', nValues);
        setData(nData);
        setOpen(false);
        form.resetFields();
      });

      return;
    }

    form.validateFields().then((values) => {
      const nValues = onOkAdapter(values);
      setData([...data, { index: data.length, ...nValues }]);
      setOpen(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setOpen(false);
  };

  const columns = [
    {
      title: '模板名称',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '点名时间',
      width: 100,
      dataIndex: 'time',
      key: 'time',
      // render: (text) => <a>{text}</a>,
    },
    // {
    //   width: 100,
    //   title: '指定点名人员',
    //   dataIndex: 'menbers',
    //   key: 'menbers',
    //   render: (_) => {
    //     if (!_) return '暂无';
    //     return _?.join('、');
    //   },
    //   mode: 'tags',
    //   options: MENBERS.map((item) => {
    //     return { label: item, value: item };
    //   }),
    // },
    {
      width: 100,
      title: '单位',
      dataIndex: 'danwei',
      mode: 'tags',
      key: 'danwei',
      options: [
        { label: '一所', value: '一所' },
        { label: '二所', value: '二所' },
        { label: '三所', value: '三所' },
      ],
    },
    {
      width: 100,
      title: '监室',
      dataIndex: 'jianshi',
      mode: 'tags',
      key: 'jianshi',
      options: [
        { label: 'A区201', value: 'A区201' },
        { label: 'A区101', value: 'A区101' },
        { label: 'A区102', value: 'A区102' },
      ],
    },
    {
      title: '人员',
      dataIndex: 'renyuan',
      mode: 'tags',
      key: 'renyuan',
      width: 100,
      options: [
        { label: '全部', value: '全部' },
        { label: '一级重大安全风险人员', value: '一级重大安全风险人员' },
        { label: '加戴械具人员', value: '加戴械具人员' },
        { label: '病人', value: '病人' },
        { label: '新入所', value: '新入所' },
        { label: '准备出所', value: '准备出所' },
      ],
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      options: [
        { label: '开启', value: '开启' },
        { label: '关闭', value: '关闭' },
      ],
      render: (_) => <Tag color="green">{_}</Tag>,
    },

    {
      title: '操作',
      key: 'action',
      width: 60,
      render: (_, record) => (
        <Row gutter={10}>
          <Col>
            <a onClick={() => handleEdit(record)}>编辑</a>
          </Col>
          {/* <Col>
            <a>会见审核</a>
          </Col>
          <Col>
            <a>分派会见室</a>
          </Col>
          <Col>
            <a>会见结束</a>
          </Col> */}
        </Row>
      ),
    },
  ];

  return (
    <PageContainer>
      <Modal title={isEdit ? '编辑' : '新增'} open={open} onOk={handleOk} onCancel={handleCancel}>
        <Card>
          <Form form={form} labelCol={{ span: 7 }} wrapperCol={{ span: 18 }}>
            {columns.map((item) => {
              if (item.key === 'action') return null;

              if (item.options)
                return (
                  <Form.Item label={item.title} name={item.key} key={item.key}>
                    <Select mode={item.mode || null}>
                      {item.options?.map((item) => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                );

              if (item.key?.indexOf('time') !== -1)
                return (
                  <Form.Item
                    rules={[{ required: true, message: '请选择' }]}
                    label={item.title}
                    name={item.key}
                    key={item.key}
                  >
                    <DatePicker picker="time" showTime format="YYYY-MM-DD hh:mm:ss"></DatePicker>
                  </Form.Item>
                );
              return (
                <Form.Item
                  rules={[{ required: true, message: '请输入' }]}
                  label={item.title}
                  name={item.key}
                  key={item.key}
                >
                  <Input></Input>
                </Form.Item>
              );
            })}
          </Form>
        </Card>
      </Modal>
      <Card>
        <Row className="mb10">
          <Button
            type="primary"
            onClick={() => {
              setOpen(true);
              setIsEdit(false);
            }}
          >
            新增
          </Button>
        </Row>
        <Typography.Title level={2} style={{ textAlign: 'center' }}>
          <Table columns={columns} dataSource={data}></Table>
        </Typography.Title>
      </Card>
    </PageContainer>
  );
};

export default Admin;
